<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer userListPage">
      <div class="table-serch-bar">
        <el-form ref="form" :inline="true" :model="form" size="medium">
          <el-form-item label="客户名称">
            <el-input
              v-model="form.name"
              placeholder="请输入客户名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="账号状态">
            <el-checkbox v-model="discount">生效</el-checkbox>
            <el-checkbox v-model="discount2">失效</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="syncustomer">同步客户</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="50"
          align="center"
          type="selection"
        ></el-table-column>
        <el-table-column
          min-width="90"
          align="center"
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          min-width="160"
          align="center"
          prop="name"
          label="客户名称"
        ></el-table-column>
        <el-table-column
          min-width="200"
          align="center"
          prop="userType"
          label="用户类型"
        ></el-table-column>
        <el-table-column
          min-width="130"
          align="center"
          prop="nickName"
          label="用户昵称"
        ></el-table-column>

        <el-table-column
          min-width="90"
          align="center"
          prop="status"
          label="状态"
        >
          <template slot-scope="scope">
            <span
              :class="scope.row.status === 0 ? 'text-danger' : 'text-dafult'"
              disable-transitions
            >{{ scope.row.status === 1 ? "生效" : "失效" }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button
            type="default"
            icon="iconfont iconadd"
            size="medium"
            @click="deleteCus"
          >
            删除客户</el-button
          >
          <!-- <el-button
            type="default"
            icon="iconfont iconuser1"
            size="medium"
            @click="serviceCompany"
          >
            服务公司</el-button
          > -->
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "clientList",
  components: {},
  data() {
    return {
      selected: [],
      pageInfo: {
        total: 0,
        pageSize: 10,
        page: 1,
      },
      form: {
        name: "",
        statusList: [],
        page: 1,
        pageSize: 10,
      },
      discount: true,
      discount2: true,
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList: function () {
      this.initGetListParam();
      Http.api.post("customer/pageCustomers", this.form).then((res) => {
        console.log(res.data)
        this.tableData = res.data.content;
        this.pageInfo.total = res.data.totalElements;
      });
    },

    initGetListParam: function () {
      let statusList = new Array();
      if (this.discount) {
        statusList.push(1);
      }
      if (this.discount2) {
        statusList.push(0);
      }
      this.form.page = this.pageInfo.page;
      this.form.pageSize = this.pageInfo.pageSize;

      this.form.statusList = statusList;
    },
    handleCurrentChange(val) {
      this.getList();
    },
    handleSelectionChange: function (val) {
      this.selected = val;
    },
    onSubmit() {
      this.getList();
    },
    //分配客户
    deleteCus() {
      let that = this;
      let ids = new Array();
      this.selected.forEach((e) => {
        ids.push(e.id);
      });
      if (ids.length <= 0) {
        this.$message.warning("请选择数据");
        return false;
      }
      this.$confirm("确定要删除该客户吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true,
      })
        .then(() => {
          Http.api
            .post("customer/deleteCustomer", { ids: ids })
            .then((res) => {
              this.$message({
                type: "success",
                message: "已删除",
              });
              that.getList();
            })


        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //服务公司
    serviceCompany() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据编辑");
        return;
      } else {
        this.$router.push({
          path: "/system/serviceCompany",
          query: { id: this.selected[0].id },
        });
      }
    },
    syncustomer() {
      Http.api.post("customer/synCustomer").then((res) => {
        this.$message.success("数据异步同步中,请稍后查询");
      });
    },
  },
};
</script>


